<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .Specifications {
        margin-left: 10%;
        border: 1px solid #a3c0e8;
        width: 75%;
        height: auto;
        padding-top: 15px;
        padding-bottom: 15px;
      }

      .Specifications span {
        margin-left: 8%;
      }

      .addSpecification div {
        text-align: center;
      }

      /*是否启用规格 添加*/
      .addSpecification input {
        margin: 1%;
        padding: 6px 12px;
      }

      .addSpecification button:nth-of-type(1) {
        color: #fff;
        background: #ff0000;
        border-color: #ff0000;
        padding: 5px 10px;
        border-radius: 4px;
      }

      .addSpecification button:nth-last-child(1) {
        color: #fff;
        background: #35baf6;
        border-color: #35baf6;
        padding: 5px 10px;
        border-radius: 4px;
      }

      .saveGoods {
        color: #fff;
        background-color: #35baf6;
        border-color: #35baf6;
        padding: 6px 26px;
      }

      .wrapper {
        width: 100%;
        padding: 0;
        margin: 0 auto;
        clear: both;
      }

      .hide {
        display: none;
      }

      .text_a {
        width: 100px;
        height: 27px;
        line-height: 27px;
        text-align: center;
        background: red;
        border: 0px;
        border-radius: 3px;
        color: #ffffff;
        padding: 4px;
        font-size: 12px;
      }

      .text_a:hover,
      .text_a:active,
      .text_a:after {
        text-decoration: none;
        color: #ffffff;
      }

      .specification {
        display: inline-block;
        padding: 4px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 14px;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 3px;
      }

      .innerbtn {
        width: 100px;
        height: 27px;
        line-height: 27px;
        text-align: center;
        background: #44abf7;
        border: 0px;
        border-radius: 3px;
        color: #ffffff;
        padding: 4px 22px;
        font-size: 12px;
      }

      .innerbtn:hover,
      .innerbtn:active,
      .innerbtn:focus {
        text-decoration: none;
        color: #ffffff;
      }

      .normTbe td,
      .normTbe th {
        padding: 0 8%;
        text-align: left;
      }

      .normTbe input {
        text-align: left;
        margin: 5px 0;
        width: 24%;
      }

      .alonTr input {
        outline: none;
        resize: none;
        padding: 0;
        border: 1px solid #ddd;
      }

      .itemInfo table {
        table-layout: fixed;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="Specifications">
      <span>产品规格</span>
      <button type="button" id="btn2" class="saveGoods specification AddTr">
        添加规格
      </button>
      <button type="button" class="saveGoods specification">刷新表格</button>

      <div class="wrapper">
        <table
          cellspacing="0"
          cellpadding="0"
          border="0"
          class="normTbe model1 hide"
          id="model"
        >
          <tbody>
            <tr class="alonTr">
              <td>
                <input type="text" />
                <a href="javascript:;" class="text_a" onclick="deltr(this)"
                  >删除该规格</a
                >
                <input type="text" placeholder="子规格名称" />
                <a class="innerbtn" href="javascript:;">添加</a>
              </td>
            </tr>
          </tbody>
        </table>

        <div class="itemInfo">
          <table
            cellspacing="0"
            cellpadding="0"
            border="0"
            class="normTbe tabInfo"
            id="table"
          >
            <tbody class="tbody1" id="tbody1"></tbody>
          </table>
        </div>
      </div>
    </div>

    <script
      type="application/javascript"
      src="../static/plugins/jquery/jquery.js"
    ></script>
    <script type="application/javascript">
      $(function () {
        //动态地新增表单
        var length = $("#table tbody>tr").length;
        var show_count = 10;
        $("#btn2").click(function () {
          if (length < show_count) {
            $("#model tbody tr").clone().appendTo("#table #tbody1");
          }
        });
      });

      function deltr(opp) {
        var length = $("#table tbody>tr").length;
        if (length <= 1) {
          alert("至少保留一行");
        } else {
          //移除当前行
          $(opp).parent().parent().remove();
        }
      }
    </script>
  </body>
</html>
